﻿<!doctype html>
<html lang="en">

	<head>
		
		<title>聊天界面</title>
		<link rel="stylesheet" type="text/css" href="/css/chat.css" />
		<script src="/js/jquery/jquery.min.js"></script>
		<script src="/js/plugins/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
		<script src="/js/plugins/jrender/jrender.min.js"></script>
		<script src="/js/plugins/jquery-form/jquery.form.js"></script>
		<link rel="stylesheet" href="/js/plugins/dialog2/dialog.css">
		<script src="/js/plugins/dialog2/dialog.min.js"></script>
		<script src="../js/chat/js/flexible.js"></script>
		<script src="../js/common.js"></script>

		<script>
			$(function () {
				var params = getParams();
				var userStr = sessionStorage.getItem("user");
				var user = JSON.parse(userStr);
				var webSocket=new WebSocket("ws://localhost:9999/hello")
				webSocket.onopen=function (ev) {
                    $.ajax({
                        type:"put",
                        url:"/personalmessages/"+user.id+"/"+params.id+"/updateState",
                        data:{'getter.id':user.id,'sender.id':params.id,state:1}



                    })
                }

                webSocket.onmessage=function (ev) {

                }
                $("#send").click(function () {
                    var content = $("#content").val();
					$.post("/personalmessages/"+user.id+"/"+params.id+"/send",{content:content,'getter.id':params.id,'sender.id':user.id,state:0},function (data) {
                        console.log(data);
                        var html1="<div class=\"show\">\n" +
                            "<div class=\"time\">"+data.obj.createTime+"</div>\n" +
                            "<div class=\"msg\">\n" +
                            "<img src='" + data.obj.sender.headImgUrl + "' alt=\"\" />\n" +
                            "<p><i clas=\"msg_input\"></i>"+ data.obj.content +"</p>\n" +
                            "</div>\n" +
                            "</div>"
                        $(".message").append(html1)
                    })
                })
                querychatRecords();
				function querychatRecords() {
                    $.get("/personalmessages/"+user.id+"/"+params.id+"/chatRecords",{currentPage:1,pageSize:0,getterId:user.id,senderId:params.id},function (data) {
						var html=""
						$.each(data.list,function (index, ele) {
						    if (ele.sender.nickName!=user.nickName) {
						        $("#nickName").html(ele.sender.nickName)
                                html += "<div class=\"send\">\n" +
                                    "<div class=\"time\" >" + ele.createTime + "</div>\n" +
                                    "<div class=\"msg\">\n" +
                                    "<img src='" + ele.sender.headImgUrl + "' alt=\"\" />\n" +
                                    "<p ><i class=\"msg_input\"></i>" + ele.content + "</p>\n" +
                                    "</div>\n" +
                                    "</div>"
                            }else{
						        html+="<div class=\"show\">\n" +
                                    "<div class=\"time\">"+ele.createTime+"</div>\n" +
                                    "<div class=\"msg\">\n" +
                                    "<img src='" + ele.sender.headImgUrl + "' alt=\"\" />\n" +
                                    "<p><i clas=\"msg_input\"></i>"+ ele.content +"</p>\n" +
                                    "</div>\n" +
                                    "</div>"
							}
                        })
                        console.log(data);
                        console.log(html);
                        $(".message").append(html)
                    })
                }
            })
		</script>
	</head>

	<body>

		<header class="header">
			<a class="back" href="personalmess.html"></a>
			<h5 class="tit"  id="nickName"></h5>

		</header>

		<div class="message" >
			<!--<div class="send">
				<div class="time" ></div>
				<div class="msg">
					<img  alt="" />
					<p ><i class="msg_input"></i></p>
				</div>
			</div>
			<div class="show">
				<div class="time">05/22 06:30</div>
				<div class="msg">
					<img src="" alt="" />
					<p><i clas="msg_input"></i></p>
				</div>
		</div>-->
		</div>



		<div class="footer">
			<input type="text" id="content">
			<button id="send">发送</button>
		</div>
	
	</body>

</html>